import React from "react";
import { NavBar, Form, Input, Button, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import "./index.css";
import http from "../../api/http";
function Index() {
  const navigate = useNavigate();
  // 登录页
  const onFinish = async (value) => {
    
    const res = await http.post("/api/login", value);
    const { data, code, message } = res.data;
    console.log(data);

    if (code === 200) {
      // code等于200的时候，存储到本地
      localStorage.setItem("token", data.token);
      localStorage.setItem("userinfo", JSON.stringify(data.userInfo));
      navigate("/user");
    } else {
      Toast.show({
        icon: "fail",
        content: message,
      });
    }
  };
  return (
    <div>
      <NavBar onBack={() => navigate("/")}></NavBar>
      <h2>登录你的12306账号</h2>
      <div className="logintext">
        <span>
          有列高铁承诺保证你的账号及个人信息安全，绝不会提供给任何第三方，
          绑定即是为同意《免责与 隐私申明》。
        </span>
      </div>

      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="default" size="large">
            登录
          </Button>
        }
      >
        <Form.Header>水平布局表单</Form.Header>
        <Form.Item
          name="username"
          label=""
          rules={[{ required: true, message: "手机号不能为空" }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="password"
          label=""
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
